<template>
	<div class="per-totle">
		<div class="title">
			<router-link to="MyInfo">
				<img class="per-back" src="../assets/ar0.png"/>
			</router-link>
			<span>个人中心</span>
		</div>
		
		<div class="first-box">
			<div class="first-line">
				<span>头像</span>
				<img src="../assets/1.jpg"/>
			</div>
			<div class="second-line">
				<span>昵称</span>
				<p>技术指导</p>
			</div>
			<div class="third-line">
				<span>生日</span>
				<p>设置生日</p>
			</div>
		</div>
		
		<div class="second-box">
			<div class="goal">
				<span>记账小目标</span>
				<input type="text" placeholder="输入记账小目标,更有利于小目标实现" style="outline: none;border:0px;"/>
			</div>
			<div class="show">
				<span>将签名展示到1500万用户的欢迎页</span>
				<button style="color: #E70861;">上传</button>
			</div>
		</div>
	
		<div class="third-box">
			<button>保存</button>
		</div>
		
	</div>
</template>

<script>
</script>

<style scoped>
*{
	margin: 0px;
	padding: 0px;

}
.per-totle{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #F6F6F6;
}
.title{
	background-color: #FFFFFF;
	height: 40px;
	width: 100%;
	border-bottom: 1px solid #DCDCDC;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.per-back{
	background-color: #FFFFFF;
	height: 20px;
	display: block;
	margin-left: 5px;
}
.title>span{
	background-color: #FFFFFF;
	font-size: 16px;
	margin-left: 22px;
}
.first-box{
	background-color: #FFFFFF;   
	width: 100%;
	height: 172px;
}
.first-line{
	background-color: #FFFFFF;
	width: 100%;
	height: 60px;
	border-bottom: 1px solid #DCDCDC;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.first-line>span{
	background-color: #FFFFFF;
	font-size: 16px;
	font-weight: 400;
	margin-left: 5px;
}
.first-line>img{
	height: 50px;
	width: 50px;
	border-radius:50%;
	margin-left:auto;
	margin-right: 5px;
}
.second-line{
	background-color: #FFFFFF;
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #DCDCDC;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.second-line>span{
	background-color: #FFFFFF;
	font-size: 16px;
	font-weight: 400;
	margin-left: 5px;
}
.second-line>p{
	font-size: 16px;
	font-weight: 400;
	background-color: #FFFFFF;
	color: #8E8E8E;
	margin-left:auto;
	margin-right: 5px;
}
.third-line{
	background-color: #FFFFFF;
	width: 100%;
	height: 50px;
	border-bottom: 1px solid #DCDCDC;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.third-line>span{
	font-size: 16px;
	font-weight: 400;
	margin-left: 5px;
	background-color: #FFFFFF;
}
.third-line>p{
	font-size: 16px;
	font-weight: 400;
	color: #8E8E8E;
	background-color: #FFFFFF;
	margin-left:auto;
	margin-right: 5px;
}
.second-box{
	height: 120px;
	width: 100%;
	background-color: #FFFFFF;
}
.goal{
	width: 100%;
	height: 80px;
	background-color: #FFFFFF;
	border-bottom: 1px solid #DCDCDC;
	display: flex;
	flex-wrap: wrap;
}
.goal>span{
	background-color: #FFFFFF;
	font-size: 16px;
	font-weight: 400;
	margin-left: 5px;
	margin-top: 10px;
}
.goal>input{
	background-color: #FFFFFF;
	width:95%;
	height:40px;
	margin-left: 5px;
}
.goal>input::-webkit-input-placeholder{  /* 针对 谷歌 内核 */
	color:#8E8E8E ;
}
.goal>input:-ms-input-placeholder{  /* 微软ie */
	color:#8E8E8E ;
}
.goal>input:-moz-placeholder{    /* 火狐 */
	color:#8E8E8E ;
}
.show{
	width: 100%;
	height: 40px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	border-bottom: 1px solid #DCDCDC;
	background-color: #FFFFFF;
	
}
.show>span{
	font-size: 16px;
	font-weight: 400;
	margin-left: 5px;
	background-color: #FFFFFF;
}
.show>button{
	height: 22px;
	width: 45px;
	margin-left:auto;
	margin-right: 5px;
	border-radius: 12px;
	background-color: #FFFFFF;
	border: 1px solid #E70861;
}
.show>button:focus{
	outline: 0;	
}


.third-box{
	align-items: center;
	flex-wrap: wrap;
}
.third-box>button{
	margin-top: 40px;
	border:  #EE504F;
	background-color: #EE504F;
	height: 40px;
	width:calc(100% - 30px);
	font-size: 20px;
	color: #FFFFFF;
	border-radius: 15px;
}
.third-box>button:focus{
	outline: 0;	
}

</style>
